<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <h1 class="app-title">
        <span>传感器管理系统</span>
      </h1>
      <div class="header-actions">
        <el-button type="primary" @click="toggleDrawer">
          修改传感器参数
        </el-button>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 搜索区域 -->
      <div class="search-bar">
        <el-input 
          v-model="input1" 
          placeholder="请输入企业名称"
          class="search-input"
        >
          <template #append>
            <el-button @click="searchData">
              搜索
            </el-button>
          </template>
        </el-input>
      </div>

      <!-- 数据展示区域 -->
      <div class="data-display">
        <el-table :data="paginatedData" stripe class="data-table">
          <el-table-column prop="name" label="企业" />
          <el-table-column label="柜体">
            <template v-slot="scope">
              <el-select v-model="scope.row.selectedCabinet" @change="fetchequipments(scope.row)" placeholder="选择柜体">
                <el-option v-for="cabinet in scope.row.cabinets" :key="cabinet._id" :label="cabinet.name" :value="cabinet._id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="传感器编号">
            <template v-slot="scope">
              <div v-if="scope.row.equipment_codes.length > 0">
                <el-tag v-for="(code, index) in scope.row.equipment_codes" :key="index">
                  {{ code }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="pagination-wrapper">
          <el-pagination 
            :page-size="pageSize" 
            :current-page="currentPage" 
            :total="filteredTableData.length"
            @current-change="handlePageChange" 
            layout="prev, pager, next, jumper"
            :page-count="Math.ceil(filteredTableData.length / pageSize)" 
          />
        </div>
      </div>
    </main>

    <!-- 侧边抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      direction="rtl"
      :size="isMobile ? '90%' : '80%'"
      :destroy-on-close="false"
      class="parameter-drawer"
    >
      <!-- 使用 header 插槽代替 title 插槽 -->
      <template #header>
        <div class="drawer-title">
          <span class="title-icon">🛠️</span>
          <span class="title-text">远程修改传感器参数</span>
        </div>
      </template>
      
      <div class="drawer-content">
        <!-- 基础信息表单 -->
        <section class="base-info">
          <el-form :model="form" label-position="top">
            <!-- 主表单 ID -->
            <el-form-item label="ID" prop="ID">
              <el-input v-model="form.ID" class="input-unit-width" />
            </el-form-item>
            <!-- 参数下拉选择 -->
            <el-form-item label="参数" prop="unit">
              <el-select v-model="form.unit" placeholder="请选择参数" filterable allow-create :default-first-option="true" class="input-unit-width">
                <el-option v-for="item in commonUnits" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </section>

        <!-- 添加传感器按钮组 -->
        <section class="sensor-actions">
          <div class="add-sensor-buttons">
            <el-button @click="addSensorForm('temperature')" type="primary">
              添加温度传感器
            </el-button>
            <el-button @click="addSensorForm('gas')" type="primary">
              添加气体传感器
            </el-button>
          </div>
        </section>

        <!-- 传感器列表 -->
        <section class="sensor-list">
          <transition-group name="sensor-fade">
            <el-card 
              v-for="(sensor, index) in sensorForms" 
              :key="index" 
              class="sensor-card"
              @mousemove="(e) => handleCardMouseMove(e, $event.currentTarget)"
            >
              <div class="sensor-title">
                {{ sensor.type === 'temperature' ? '温度传感器' : '气体传感器' }}
              </div>
              <!-- 输入传感器 ID -->
              <el-form-item label="传感器 ID" prop="sensorID">
                <el-input v-model="sensor.inputID" class="input-unit-width" type="text" @change="generateCompleteString" />
              </el-form-item>
              <!-- 选择型号 -->
              <el-form-item label="选择型号" prop="sensorModel">
                <el-select v-model="sensor.selectedModel" class="input-unit-width" @change="generateCompleteString">
                  <el-option v-for="model in getModelOptions(sensor.type)" :key="model.value" :label="model.label" :value="model.value" />
                </el-select>
              </el-form-item>
              <!-- 输入参数 -->
              <el-form-item :label="sensor.type === 'temperature' ? '输入温度' : '输入浓度'" prop="sensorValue">
                <el-input v-model.number="sensor.value" class="input-unit-width" @change="generateCompleteString" />
              </el-form-item>
              <!-- 删除按钮 -->
              <el-button @click="removeSensorForm(index)" class="remove-button">移除</el-button>
            </el-card>
          </transition-group>
        </section>

        <!-- 底部操作栏 -->
        <div class="drawer-footer">
          <el-button type="primary" @click="confirmAndGenerateString" :disabled="!isFormValid">
            确认修改
          </el-button>
        </div>

        <!-- 完整参数字符串显示 -->
        <p v-if="isConfirmed && completeParameterString" class="complete-string">
          完整参数字符串: {{ completeParameterString }}
        </p>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import axios from 'axios';
import { debounce } from 'lodash';
import { ElMessage } from 'element-plus';

// 添加移动端检测
const isMobile = computed(() => window.innerWidth <= 768);

// 第一部分：查看传感器编号
const tableData = ref([]);
const input1 = ref('');
const loading = ref(false);
const pageSize = ref(5);
const currentPage = ref(1);

const drawerVisible = ref(false);

const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value;
  // 如果打开抽屉，重置一些状态
  if (drawerVisible.value) {
    isConfirmed.value = false;
    completeParameterString.value = '';
  }
};

const debouncedSearch = debounce(() => {
  currentPage.value = 1;
  loadData();
}, 500);

const fetchData = async (url, params) => {
  try {
      const response = await axios.post(url, params);
      return response.data || [];
  } catch (error) {
      console.error('请求数据失败:', error);
      ElMessage.error('加载数据失败，请稍后再试');
      return [];
  }
};

const loadData = async () => {
  loading.value = true;
  console.log('开始加载数据...');
  try {
    const response = await fetchData('/api/mongo', { 
      company_name: input1.value 
    });
    
    if (!response) {
      return;
    }
    
    tableData.value = response.map(row => ({
      ...row,
      cabinets: row.cabinets || [],
      selectedCabinet: null,
      equipment_codes: []
    }));
  } catch (error) {
    console.error('加载数据失败:', error);
    ElMessage.error('加载数据失败，请稍后再试');
  } finally {
    loading.value = false;
  }
};

const fetchequipments = async (row) => {
  if (!row.selectedCabinet) return;
  loading.value = true;
  console.log('开始获取设备数据, cabinetId:', row.selectedCabinet);
  try {
    const equipments = await fetchData('/api/mongo', { //http://192.168.192.134:9999/api/mongo'
      cabinetId: row.selectedCabinet 
    });
    console.log('获取到的设备数据:', equipments);
    
    row.equipment_codes = Array.isArray(equipments) ? equipments.filter(code => code && code.trim() !== '') : [];
    console.log('处理后的设备编码:', row.equipment_codes);
  } catch (error) {
    console.error('获取设备数据失败:', error);
    ElMessage.error('获取设备数据失败');
  } finally {
    loading.value = false;
  }
};

const filteredTableData = computed(() => {
  if (!input1.value.trim()) {
      return tableData.value;
  }
  return tableData.value.filter(item =>
      item.name.toLowerCase().includes(input1.value.toLowerCase())
  );
});

const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return filteredTableData.value.slice(startIndex, startIndex + pageSize.value);
});

const searchData = () => {
  loadData();
};

const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

watch(input1, () => {
  currentPage.value = 1;
});

onMounted(() => {
  loadData();
});

// 第二部分：远程修改传感器参数
const form = ref({
    ID: '87103953',
    unit: '1',
});

const commonUnits = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
];

const sensorForms = ref([]);
const completeParameterString = ref('');
const isConfirmed = ref(false);

const modelOptions = {
    temperature: [
        { value: 'new', label: '新款', prefix: '0300010001' },
        { value: 'old', label: '旧款', prefix: '0300040001' },
    ],
    gas: [
        { value: 'commonGas', label: '可燃', prefix: '0300000001' },
        { value: 'oxygen', label: '氧气', prefix: '0300000001' },
    ],
};

const getModelOptions = (type) => modelOptions[type] || [];
// 添加传感器表单
const addSensorForm = (type) => {
    const newSensor = {
        type: type,
        inputID: type === 'temperature' ? '8' : '3',
        selectedModel: type === 'temperature' ? 'new' : 'commonGas',
        value: type === 'temperature' ? 35 : 20
    };
    sensorForms.value.push(newSensor);
};
// 删除传感器表单
const removeSensorForm = (index) => {
    sensorForms.value.splice(index, 1);
    generateCompleteString();
};
// 输入框内容变化时，重新生成完整参数字符串
const generateCompleteString = () => {
    if (!isFormValid.value) return;

    const mainPart = `${form.value.ID},${form.value.unit}`;

    const sensorParts = sensorForms.value.map(sensor => {
        const model = getModelOptions(sensor.type).find(m => m.value === sensor.selectedModel);
        if (model) {
            let inputID = sensor.inputID || '';
            inputID = inputID.padStart(2, '0');

            let value = sensor.value || 0;
            if (sensor.type === 'temperature') {
                value *= 10;
            }

            const hexValue = value.toString(16).toUpperCase().padStart(4, '0');
            return `${inputID}${model.prefix}${hexValue}`;
        }
        return '';
    }).filter(Boolean);

    completeParameterString.value = [mainPart, ...sensorParts].join(',');
};
// 确认修改并发送数据
const confirmAndGenerateString = async () => {
    generateCompleteString();
    isConfirmed.value = true;

    if (completeParameterString.value) {
        if (typeof completeParameterString.value !== 'string') {
            console.error('错误：数据格式不是字符串');
            return;
        }

        try {
            console.log('准备发送数据:', {
                data: completeParameterString.value,
            });

            const response = await axios.post('/api/sendMqttData', {//http://192.168.192.134:9999/api/mongo'
                data: completeParameterString.value,
            }, {
                headers: {
                    'Content-Type': 'application/json',
                },
            });

            console.log('数据成功发送:', response.data);
        } catch (error) {
            console.error('发送数据时出错:', error.response?.data || error.message);
        }
    } else {
        console.error('生成的参数字符串为空');
    }
};
// 表单验证
const isFormValid = computed(() => {
    return form.value.ID && 
           form.value.unit && 
           Array.isArray(sensorForms.value) &&
           sensorForms.value.length > 0 &&
           sensorForms.value.every(sensor =>
               sensor.inputID && 
               sensor.selectedModel && 
               sensor.value !== null
           );
});
// 第三部分：辅助函数
const handleCardMouseMove = (event, card) => {
  const rect = card.getBoundingClientRect();
  const x = ((event.clientX - rect.left) / rect.width) * 100;
  const y = ((event.clientY - rect.top) / rect.height) * 100;
  card.style.setProperty('--x', `${x}%`);
  card.style.setProperty('--y', `${y}%`);
};
</script>

<style scoped>
/* 简化主容器背景 */
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, 
    rgba(103, 194, 58, 0.05),
    rgba(133, 206, 97, 0.08)
  );
  position: relative;
  overflow: hidden;
}

/* 简化流光效果 */
.app-container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(103, 194, 58, 0.08) 25%,
    rgba(103, 194, 58, 0.12) 50%,
    rgba(103, 194, 58, 0.08) 75%,
    transparent
  );
  background-size: 200% 200%;
  animation: simpleShine 15s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* 移除多余的动画效果 */
.app-container::after,
.el-button--primary::before,
.sensor-card::before,
.app-title::after {
  display: none;
}

/* 全局动画优化 */
@keyframes globalShine {
  0% {
    background-position: 0% 0%, 200% 0%;
    transform: rotate(0deg);
  }
  50% {
    background-position: 100% 100%, -100% 100%;
    transform: rotate(180deg);
  }
  100% {
    background-position: 0% 0%, 200% 0%;
    transform: rotate(360deg);
  }
}

/* 顶部导航栏优化 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.2rem 2.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(103, 194, 58, 0.12);
  box-shadow: 
    0 4px 24px rgba(103, 194, 58, 0.06),
    0 1px 2px rgba(103, 194, 58, 0.03);
}

.app-title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.4rem;  /* 更大的字体 */
  font-weight: 800;   /* 更粗的字重 */
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0.5rem 0;
}

.app-title::before {
  content: '🎛️';
  font-size: 2.6rem;  /* 更大的图标 */
  animation: titleIconFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(103, 194, 58, 0.3));
}

.app-title span {
  background: linear-gradient(45deg, 
    #67c23a,
    #95d475,
    #67c23a
  );
  background-size: 200% auto;
  animation: gradientFlow 3s linear infinite;
  background-clip: text; /* 添加这一行 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-shadow: 
    4px 4px 8px rgba(103, 194, 58, 0.3),
    -2px -2px 4px rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 4px 6px rgba(103, 194, 58, 0.2));
}

/* 标题装饰线条 */
.app-title span::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    rgba(103, 194, 58, 0.4),
    rgba(133, 206, 97, 0.9),
    rgba(103, 194, 58, 0.4)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.2);
}

.app-title:hover span::after {
  transform: scaleX(1);
}

/* 标题光晕效果 */
.app-title::after {
  content: '';
  position: absolute;
  inset: -25px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(103, 194, 58, 0.25),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  border-radius: 30px;
}

.app-title:hover::after {
  opacity: 1;
}

/* 添加渐变动画 */
@keyframes gradientFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 图标浮动动画 */
@keyframes titleIconFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg) scale(1); 
  }
  50% { 
    transform: translateY(-5px) rotate(8deg) scale(1.1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .app-title {
    font-size: 1.8rem;
  }
  
  .app-title::before {
    font-size: 2rem;
  }
}

.header-actions {
  margin-left: auto;
}

/* 搜索区域优化 */
.search-bar {
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

/* 搜索框样式优化 */
.search-input {
  width: 100%;
}

.search-input .el-input__wrapper {
  height: 48px !important;
  background: rgba(255, 255, 255, 0.95);
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 
    0 4px 16px rgba(103, 194, 58, 0.08),
    0 1px 3px rgba(103, 194, 58, 0.05) !important;
}

/* 搜索按钮样式优化 */
.search-input :deep(.el-input-group__append) {
  padding: 0 !important;
  border: none !important;
  background: linear-gradient(45deg, #67c23a, #85ce61) !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  box-shadow: 
    0 4px 16px rgba(103, 194, 58, 0.2),
    0 2px 4px rgba(103, 194, 58, 0.1);
  overflow: hidden;
  position: relative;
}

.search-input :deep(.el-input-group__append .el-button) {
  height: 48px !important;
  padding: 0 2.5rem !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  color: white !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

/* 搜索按钮悬浮效果 */
.search-input :deep(.el-input-group__append:hover) {
  background: linear-gradient(45deg, #85ce61, #95d475) !important;
  box-shadow: 
    0 8px 24px rgba(103, 194, 58, 0.25),
    0 4px 8px rgba(103, 194, 58, 0.15);
  transform: translateY(-2px);
}

/* 搜索按钮点击效果 */
.search-input :deep(.el-input-group__append:active) {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 20px rgba(103, 194, 58, 0.2),
    0 3px 6px rgba(103, 194, 58, 0.1);
}

/* 搜索框占位符样式 */
.search-input :deep(.el-input__inner::placeholder) {
  font-size: 1rem;
  color: #909399;
}

/* 数据展示区域优化 */
.data-display {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 
    0 4px 20px rgba(103, 194, 58, 0.1),
    0 2px 6px rgba(103, 194, 58, 0.08);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
  isolation: isolate;
}

/* 数据展示区域流光效果 */
.data-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(103, 194, 58, 0.08) 25%,
    rgba(103, 194, 58, 0.12) 50%,
    rgba(103, 194, 58, 0.08) 75%,
    transparent
  );
  background-size: 200% 200%;
  animation: tableShine 6s linear infinite;
  z-index: 1;
}

/* 表格样式优化 */
.data-table {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* 表格头部样式优化 */
.el-table th {
  background: rgba(103, 194, 58, 0.1) !important;
  backdrop-filter: blur(4px);
}

/* 表格行样式优化 */
.el-table tr,
.el-table td {
  background: transparent !important;
}

/* 表格悬浮效果优化 */
.el-table tr:hover td {
  background: rgba(103, 194, 58, 0.08) !important;
  backdrop-filter: blur(4px);
}

/* 分页器容器优化 */
.pagination-wrapper {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px);
  margin-top: 0;
  border-top: 1px solid rgba(103, 194, 58, 0.1);
}

@keyframes tableShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 表格样式优化 */
.data-table {
  margin-bottom: 0;
  --el-table-border-color: rgba(103, 194, 58, 0.1);
  --el-table-header-bg-color: rgba(103, 194, 58, 0.05);
  --el-table-row-hover-bg-color: rgba(103, 194, 58, 0.02);
}

/* 表格头部样式 */
.el-table th {
  font-weight: 600;
  color: #2c3e50;
  background: linear-gradient(
    to bottom,
    rgba(103, 194, 58, 0.08),
    rgba(103, 194, 58, 0.05)
  ) !important;
  border-bottom: 2px solid rgba(103, 194, 58, 0.1);
}

/* 表格单元格样��� */
.el-table td {
  padding: 8px 0;
  transition: all 0.3s ease;
}

/* 表格行悬浮效果 */
.el-table tr:hover td {
  background: rgba(103, 194, 58, 0.05) !important;
}

/* 选择框样式优化 */
.el-select {
  width: 100%;
}

.el-select .el-input__wrapper {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(103, 194, 58, 0.2);
  transition: all 0.3s ease;
}

.el-select .el-input__wrapper:hover {
  border-color: rgba(103, 194, 58, 0.4);
  box-shadow: 
    0 2px 8px rgba(103, 194, 58, 0.1),
    0 1px 2px rgba(103, 194, 58, 0.06);
}

/* 标签样式优化 */
.el-tag {
  margin: 4px;
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  background: rgba(103, 194, 58, 0.1);
  border-color: rgba(103, 194, 58, 0.2);
  color: #67c23a;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-tag:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(103, 194, 58, 0.15),
    0 2px 4px rgba(103, 194, 58, 0.1);
  background: rgba(103, 194, 58, 0.15);
}

/* 按钮样式优化 */
.el-button {
  height: 40px;
  padding: 0 24px !important;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button--primary {
  background: linear-gradient(45deg, #67c23a, #85ce61) !important;
  border: none !important;
  box-shadow: 
    0 4px 16px rgba(103, 194, 58, 0.2),
    0 2px 4px rgba(103, 194, 58, 0.1);
}

.el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 20px rgba(103, 194, 58, 0.25),
    0 3px 6px rgba(103, 194, 58, 0.15);
}

/* 传感器卡片优化 */
.sensor-card {
  position: relative;
  overflow: visible;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.8rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(103, 194, 58, 0.1);
  box-shadow: 
    0 8px 24px rgba(103, 194, 58, 0.06),
    0 2px 8px rgba(103, 194, 58, 0.04);
}

.sensor-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #34495e;
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(103, 194, 58, 0.1);
  background: linear-gradient(to right, transparent, rgba(103, 194, 58, 0.05), transparent);
}

/* 抽屉整体样式优化 */
.el-drawer {
  background: linear-gradient(135deg, #f5f9f5, #f0f7f0) !important;
  border-left: 1px solid rgba(103, 194, 58, 0.1);
}

/* 抽屉标题样式优化 */
.drawer-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.title-icon {
  font-size: 1.8rem;
  animation: iconFloat 3s ease-in-out infinite;
}

.title-text {
  font-size: 1.8rem;
  font-weight: 600;
  background: linear-gradient(45deg, #67c23a, #85ce61);
  background-clip: text; /* 添加这一行 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}


/* 标题下划线效果 */
.title-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(103, 194, 58, 0.2),
    rgba(133, 206, 97, 0.6),
    rgba(103, 194, 58, 0.2)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.title-text:hover::after {
  transform: scaleX(1);
}

/* 图标浮动动画 */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

/* 抽屉头部样式优化 */
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(103, 194, 58, 0.1);
  box-shadow: 0 4px 20px rgba(103, 194, 58, 0.08);
}

/* 抽屉内容区域优化 */
.drawer-content {
  padding: 2rem 2.5rem;
  height: calc(100% - 4rem);
  overflow-y: auto;
  position: relative;
  background: linear-gradient(135deg, #f5f9f5, #f0f7f0);
}

/* 抽屉内部流光效果 */
.drawer-content::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    linear-gradient(45deg,
      transparent,
      rgba(103, 194, 58, 0.05) 25%,
      rgba(103, 194, 58, 0.1) 50%,
      rgba(103, 194, 58, 0.05) 75%,
      transparent                  
    );
  background-size: 200% 200%;
  animation: drawerShine 8s linear infinite;
  pointer-events: none;
}

/* 基础信息表单流光效果 */
.base-info {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 
    0 8px 24px rgba(103, 194, 58, 0.08),
    0 2px 6px rgba(103, 194, 58, 0.06);
}

.base-info::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg,
      transparent,
      rgba(103, 194, 58, 0.08),
      transparent
    );
  transform: translateX(-100%);
  animation: formShine 4s ease-in-out infinite;
}

/* 添加传感器按钮组流光 */
.add-sensor-buttons {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(103, 194, 58, 0.06),
    rgba(133, 206, 97, 0.08)
  );
}

.add-sensor-buttons::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(45deg,
      transparent,
      rgba(103, 194, 58, 0.1),
      transparent
    );
  transform: translateX(-100%);
  animation: buttonGroupShine 3s ease-in-out infinite;
}

/* 抽屉画关键帧 */
@keyframes drawerShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes formShine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@keyframes buttonGroupShine {
  0% { transform: translateX(-100%) rotate(45deg); }
  50% { transform: translateX(100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* 抽屉按钮组优化 */
.add-sensor-buttons {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  background: rgba(103, 194, 58, 0.04);
  border-radius: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 抽屉底部按钮优化 */
.drawer-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(103, 194, 58, 0.1);
  box-shadow: 0 -4px 16px rgba(103, 194, 58, 0.06);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  z-index: 100;
}

/* 移除按钮优化 */
.remove-button {
  width: 100%;
  margin-top: 1.5rem;
  background: #f56c6c !important;
  border: none !important;
  box-shadow: 
    0 4px 12px rgba(245, 108, 108, 0.15),
    0 2px 4px rgba(245, 108, 108, 0.1);
  position: relative;
  z-index: 10;
}

.remove-button:hover {
  background: #ff7875 !important;
  transform: translateY(-1px);
  box-shadow: 
    0 6px 16px rgba(245, 108, 108, 0.2),
    0 3px 6px rgba(245, 108, 108, 0.15);
}

/* 分页器容器优化 */
.pagination-wrapper {
  margin-top: 1rem;
  padding: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.98)
  );
  border-top: 1px solid rgba(103, 194, 58, 0.1);
  position: sticky;
  bottom: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  box-shadow: 
    0 -2px 12px rgba(103, 194, 58, 0.06),
    0 -1px 3px rgba(103, 194, 58, 0.04);
}

/* 分页器样式优化 */
.el-pagination {
  --el-pagination-hover-color: #67c23a;
  --el-pagination-button-color: #67c23a;
  --el-pagination-hover-bg-color: rgba(103, 194, 58, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 2px 6px rgba(103, 194, 58, 0.08),
    0 1px 2px rgba(103, 194, 58, 0.04);
}

/* 分页按钮样式优化 */
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: transparent;
  border: 1px solid rgba(103, 194, 58, 0.2);
  border-radius: 6px;
  margin: 0 3px;
  transition: all 0.3s ease;
  height: 28px;
  line-height: 28px;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background: rgba(103, 194, 58, 0.1);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(103, 194, 58, 0.15),
    0 2px 4px rgba(103, 194, 58, 0.1);
}

/* 页码样式优化 */
.el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
}

.el-pagination .el-pager li:hover:not(.is-active) {
  background: rgba(103, 194, 58, 0.1);
  border-color: rgba(103, 194, 58, 0.2);
  transform: translateY(-1px);
}

.el-pagination .el-pager li.is-active {
  background: linear-gradient(45deg, #67c23a, #85ce61);
  color: white;
  font-weight: 600;
  box-shadow: 
    0 4px 12px rgba(103, 194, 58, 0.2),
    0 2px 4px rgba(103, 194, 58, 0.1);
  transform: translateY(-1px);
}

/* 跳转页面输入框样式 */
.el-pagination .el-input__wrapper {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(103, 194, 58, 0.2) !important;
  transition: all 0.3s ease;
}

.el-pagination .el-input__wrapper:hover,
.el-pagination .el-input__wrapper:focus-within {
  border-color: rgba(103, 194, 58, 0.4) !important;
  box-shadow: 
    0 2px 8px rgba(103, 194, 58, 0.15),
    0 1px 2px rgba(103, 194, 58, 0.1) !important;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }

  .add-sensor-buttons {
    flex-direction: column;
    padding: 1rem;
  }

  .drawer-footer {
    padding: 1rem;
  }

  .pagination-wrapper {
    margin-top: 1.5rem;
    padding: 0.8rem;
  }

  .el-drawer__header {
    padding: 1.5rem !important;
  }
  
  .el-drawer__title {
    font-size: 1.4rem !important;
  }
}

/* 流光背景效果 */
.app-container::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    linear-gradient(45deg, 
      transparent 0%, 
      rgba(103, 194, 58, 0.1) 45%, 
      rgba(103, 194, 58, 0.2) 50%, 
      rgba(103, 194, 58, 0.1) 55%, 
      transparent 100%);
  background-size: 200% 200%;
  animation: shine 8s linear infinite;
  pointer-events: none;
}

/* 按钮流光效果 */
.el-button--primary {
  position: relative;
  overflow: hidden;
}

.el-button--primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  animation: buttonShine 3s ease-in-out infinite;
}

/* 卡片悬浮光效 */
.sensor-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--x, 50%) var(--y, 50%),
    rgba(103, 194, 58, 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.sensor-card:hover::before {
  opacity: 1;
}

/* 标题光晕效果 */
.app-title {
  position: relative;
}

.app-title::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(103, 194, 58, 0.2),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.app-title:hover::after {
  opacity: 1;
}

/* 搜索框聚焦光效 */
.search-input .el-input__wrapper:focus-within {
  position: relative;
}

.search-input .el-input__wrapper:focus-within::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: linear-gradient(
    45deg,
    rgba(103, 194, 58, 0.3),
    rgba(133, 206, 97, 0.3)
  );
  z-index: -1;
  animation: pulse 2s ease-in-out infinite;
}

/* 动画关键帧 */
@keyframes shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes buttonShine {
  0% { transform: rotate(45deg) translateX(-200%); }
  100% { transform: rotate(45deg) translateX(200%); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.02); opacity: 0.8; }
}

/* 标签动画效果 */
.el-tag {
  animation: tagFloat 3s ease-in-out infinite;
}

@keyframes tagFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 抽屉打开动画 */
.el-drawer {
  animation: drawerOpen 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes drawerOpen {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 传感器卡片添加动画 */
.sensor-fade-enter-active {
  animation: cardAdd 0.4s ease-out;
}

.sensor-fade-leave-active {
  animation: cardRemove 0.4s ease-in;
}

@keyframes cardAdd {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cardRemove {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}
</style>